import React, { useEffect, useState } from "react";
import { Button } from "antd-mobile";
import { QRCodeSVG } from "qrcode.react";
import s from "./style.module.less"; 
//todo 要是有微信开发平台账号就可以实现微信扫码登录
const QRLogin = ({switchLogin}) => {
  const [qrValue, setQrValue] = useState("");
  const [status, setStatus] = useState("waiting"); // waiting, success, expired 
  useEffect(() => {
    // 1. 获取二维码内容（这里用模拟数据，实际应调用后端接口）
    const uuid = Date.now() + "" + Math.random();
    // 使用有效的URL格式，包含必要的参数
    setQrValue(`https://www.bilibili.com/video/BV1Zt4y1S7ew/?spm_id_from=333.337.search-card.all.click&vd_source=33ac342b6251e51f848689fc48b21cd8`);

    // 2. 轮询二维码状态（实际应调用后端接口判断扫码状态）
    const timer = setInterval(() => {
      // 这里模拟扫码检测逻辑
      // 实际应调用接口：checkQRCodeStatus(uuid)
      // if (res.data.status === 'success') { 
      //   setStatus('success')
      //   clearInterval(timer)
      // }
    }, 2000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className={s.index}>
      <QRCodeSVG
        value={qrValue || "loading..."}
        title={"扫码登录"}
        size={128}
        bgColor={"#ffffff"}
        fgColor={"#000000"}
        level={"L"}
        imageSettings={{
          src: "https://img1.baidu.com/it/u=3548245306,3878694403&fm=253&fmt=auto&app=138&f=JPG?w=225&h=225",
          x: undefined,
          y: undefined,
          height: 24,
          width: 24,
          opacity: 1,
          excavate: true,
        }}
      /> 
      
      {status === "success" ? (
        <div>登录成功！</div>
      ) : (
        <Button color="primary" onClick={switchLogin}>其它登录方式</Button>
      )}
    </div>
  );
};

export default QRLogin;
